<template>
    <div class="appcontainer">
        <!-- 大图 -->
        <div class="bigimg">
            <div class="inbigimg">
                <div class="bigimgtitle" v-if="language == 'zh'">
                    文献命名实体识别
                </div>
                <div class="bigimgtitle" v-else>Document Naming Entity Recognition</div>
            </div>
        </div>
        <div class="botcontent">
            <!-- 词云 -->
            <div id="echartsWordcloud" style="width:100%;height:250px;margin: 0 auto;"></div>
            <div class="searchContent" v-if="language == 'zh'">
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
                    <el-form-item label="文献类型" prop="diseases" style="width: 100%;">
                        <el-radio-group v-model="queryParams.extend2" @input="changeextend2">
                            <el-radio v-for="(item,index) in documentType" :key="index"
                                :label="language == 'zh' ? item.cTitle : item.cSubtitle">{{language == 'zh' ?
                                item.cTitle : item.cSubtitle}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="文献时间" prop="dateRange">
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="关键字搜索" prop="keyWord">
                        <el-input v-model="queryParams.keyWord" placeholder="请输入关键字" clearable
                            @keyup.enter.native="handleQuery" style="width: 350px;" size="small" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="searchContent" v-else>
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="180px">
                    <el-form-item label="document type" prop="extend2" style="width: 100%;">
                        <el-radio-group v-model="queryParams.extend2" @input="changeextend2">
                            <el-radio v-for="(item,index) in documentType" :key="index"
                                :label="language == 'zh' ? item.cTitle : item.cSubtitle">{{language == 'zh' ?
                                item.cTitle : item.cSubtitle}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="Literature time" prop="dateRange">
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
                            start-placeholder="Start date" value-format="yyyy-MM-dd"
                            end-placeholder="End Date"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="keyword search" prop="keyWord">
                        <el-input v-model="queryParams.keyWord" placeholder="Please enter keywords" clearable
                            @keyup.enter.native="handleQuery" style="width: 350px;" size="small" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">search
                            for</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">reset</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="tableContent" v-if="language == 'zh'">
                <el-table v-loading="loading" :data="tableList">
                    <el-table-column label="文献名称" align="left" header-align="center" prop="cTitle" width="300"
                        show-overflow-tooltip />
                    <el-table-column label="简介" align="left" header-align="center" prop="cIntroduction"
                        show-overflow-tooltip width="500" />
                    <el-table-column label="作者" align="center" header-align="center" prop="cAuthor"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="来源" align="left" header-align="center" prop="cSource"
                        show-overflow-tooltip />
                    <el-table-column label="发布时间" align="center" header-align="center" prop="cDate"
                        show-overflow-tooltip />
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </div>
            <div class="tableContent" v-else>
                <el-table v-loading="loading" :data="tableList" empty-text="No data available at the moment">
                    <el-table-column label="Document Name" align="left" header-align="center" prop="cTitle" width="300"
                        show-overflow-tooltip />
                    <el-table-column label="brief introduction" align="left" header-align="center" prop="cIntroduction"
                        show-overflow-tooltip width="500" />
                    <el-table-column label="author" align="center" header-align="center" prop="cAuthor"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="source" align="left" header-align="center" prop="cSource"
                        show-overflow-tooltip />
                    <el-table-column label="Release time" align="center" header-align="center" prop="cDate"
                        show-overflow-tooltip />
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                language: '',
                data: [],
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    dataLanguage: null,
                    keyWord: null,
                    begin: null,
                    end: null,
                    extend2: null
                },
                documentType: [],
                dateRange: [],
                tableList: [],
                total: 0,
                loading: true,
            }
        },
        created() {
            this.language = sessionStorage.getItem('language')
            window.addEventListener('setItem', this.languages);
            this.getData()
            this.getList()
        },
        mounted() {

        },
        methods: {
            // 监听session中language的变化
            languages(e) {
                console.log(e, 8888888888888)
                this.language = sessionStorage.getItem('language')
                console.log(this.language, 5555555555)
                this.getData()
                this.getList()
            },
            // 文献类型选择
            changeextend2(val) {
                console.log(val, 8888888888)
                this.queryParams.extend2 = val
            },
            // 获取词云数据
            async getData() {
                await this.axios
                    .get('/system/content/document/params').then(res => {
                        if (res.data.code == 200) {
                            if (res.data.data) {
                                this.data = []
                                if (res.data.data.wordCloud && res.data.data.wordCloud.length != 0) {
                                    let worddata = res.data.data.wordCloud
                                    worddata.map(item => {
                                        if (this.language == 'zh') {
                                            this.data.push({
                                                value: this.generateRandomNumber(),
                                                name: item.cTitle
                                            })
                                        } else {
                                            this.data.push({
                                                value: this.generateRandomNumber(),
                                                name: item.cSubtitle
                                            })
                                        }
                                    })
                                }
                                this.documentType = res.data.data.documentType
                                this.$nextTick(() => {
                                    this.initEcharts(this.data)
                                })
                            }
                        }
                    })
            },
            // 获取表格数据
            getList() {
                this.loading = true
                var query = {
                    pageNum: this.queryParams.pageNum,
                    pageSize: this.queryParams.pageSize,
                    dataLanguage: this.language,
                    keyWord: this.queryParams.keyWord,
                    begin: this.dateRange.length != 0 ? this.dateRange[0] : null,
                    end: this.dateRange.length != 0 ? this.dateRange[1] : null,
                    extend2: this.queryParams.extend2
                }
                this.axios
                    .get('/system/content/document/list', { params: query }).then(res => {
                        if (res.data.code == 200) {
                            this.tableList = res.data.rows
                            this.total = res.data.total
                        }
                        this.loading = false
                    })
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.queryParams = {
                    pageNum: 1,
                    pageSize: 10,
                    dataLanguage: this.language,
                    keyWord: null,
                    begin: null,
                    end: null,
                    extend2: null
                }
                this.dateRange = []
                this.handleQuery();
            },
            // 随机生成三位数
            generateRandomNumber() {
                // 生成一个随机数，取决于你需要的位数
                const min = Math.pow(10, 3); // 三位数
                const max = Math.pow(10, 5); // 五位数，可以根据需要调整
                return Math.floor(Math.random() * (max - min + 1)) + min;
            },
            // 绘制词云
            initEcharts(data) {
                let echartsWordcloud = this.$echarts.init(document.getElementById("echartsWordcloud"));
                let option = {
                    title: {
                        text: "",
                        x: "center"
                    },
                    series: [
                        {
                            type: "wordCloud",
                            shape: 'circle',
                            drawOutOfBound: false,
                            //用来调整词之间的距离
                            gridSize: 45,
                            //用来调整字的大小范围
                            sizeRange: [20, 40],
                            rotationRange: [0, 0],
                            //随机生成字体颜色
                            textStyle: {
                                normal: {
                                    color: function () {
                                        return (
                                            "rgb(" +
                                            Math.round(Math.random() * 255) +
                                            ", " +
                                            Math.round(Math.random() * 255) +
                                            ", " +
                                            Math.round(Math.random() * 255) +
                                            ")"
                                        );
                                    }
                                }
                            },
                            //位置相关设置
                            left: "center",
                            top: "center",
                            right: null,
                            bottom: null,
                            width: "100%",
                            height: "100%",
                            //数据
                            data: data
                        }
                    ]
                };
                echartsWordcloud.setOption(option);
                //点击事件
                echartsWordcloud.on("click", function (e) { })
            }
        },
        beforeDestroy() {
            this.language = null
            window.removeEventListener('setItem', this.languages);
        },
    }
</script>
<style scoped>
    .appcontainer {
        width: 100%;
        background-color: #fff;
    }

    .bigimg {
        width: 100%;
        height: 433px;
        padding: 180px 0;
        box-sizing: border-box;
        background-image: url('../../img/wxmm.png');
        background-size: 100% 100%;
    }

    .inbigimg {
        width: 70%;
        margin: 0 auto;
        position: relative;
    }

    .bigimgtitle {
        font-size: 62px;
        color: #0d48ba;
        margin-bottom: 59px;
    }

    .botcontent {
        width: 70%;
        margin: 10px auto;
    }

    .searchContent {}
</style>